<template>
	<ly-frow-center class="header">
		
	<!-- header start -->
		<span class="marr title">班级管理</span>
		<el-button size="mini" icon="el-icon-s-platform">添加班级</el-button>
		<el-button size="mini" icon="el-icon-delete">删除</el-button>
		<el-select clearable size="mini" v-model="value" placeholder="请选择课程" class="select marl">
			<el-option size="mini" v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
		</el-select>
		<el-autocomplete clearable size="mini" suffix-icon="el-icon-search" style="position: relative;left:-10px;"
		 v-model="state" :fetch-suggestions="querySearch" placeholder="班级名称" :trigger-on-focus="false" 
		 @select="handleSelect" ></el-autocomplete>
	<!-- header end -->
	</ly-frow-center>
	<div class="main">
		
	<!-- table start -->
		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55"> </el-table-column>
			<el-table-column prop="name" label="姓名"> </el-table-column>
			<el-table-column prop="" label="性别"> </el-table-column>
			<el-table-column prop="" label="生日"> </el-table-column>
			<el-table-column prop="" label="年龄"> </el-table-column>
			<el-table-column prop="" label="入学时间"> </el-table-column>
			<el-table-column prop="" label="状态"> </el-table-column>
			<el-table-column prop="" label="课程消耗"> </el-table-column>
			<el-table-column prop="" label="操作" align="center">
				<template #default="scope">
					<ly-rscrollbar>
						<el-button type="text" size="small"> 购课 </el-button>
						<el-button type="text" size="small"> 记录 </el-button>
						<el-button type="text" size="small"> 修改 </el-button>
						<el-button type="text" size="small"> 删除 </el-button>
						<el-button type="text" size="small"> 课程 </el-button>
					</ly-rscrollbar>
				</template>
			</el-table-column>
		</el-table>
	<!-- table ned -->
	</div>
</template>

<script>
	import {onMounted} from 'vue'
	export default {
		data() {
			const restaurants = []
			const querySearch = (queryString, cb) => {
				var results = queryString
					?	restaurants.value.filter(createFilter(queryString))
					:	restaurants.value
				
				cb(results);
			};
			const createFilter = (queryString) => {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
				}
			};
			const loadAll = () => {
				return [{
					value: "Hot honey 首尔炸鸡（仙霞路）",
					address: "上海市长宁区淞虹路661号",
				}];
			};
			const handleSelect = (item) => {
				console.log(item);
			};
			onMounted(() => {
				restaurants.value = loadAll();
			});
			return {
				// header start
				options: [{
					value: '选项1',
					label: '黄金糕'
				}],
				value: '',
				restaurants,
				state: '',
				querySearch,
				createFilter,
				loadAll,
				handleSelect,
				
				// table s
				tableData: [{
          name: '王小虎',
        }],
				
				// form start
				form: {},
			}
		},
		methods:{
			handleSelectionChange(val) {
				console.log('lya', val)
				this.multipleSelection = val;
			}
		}
	}
</script>

<style lang="less" scoped>
	.header{
		.title{background-color: white;width: 140px;height: 40px;line-height: 40px;text-align: center;}
		.select{position: relative;z-index: 1;}
	}
	.main{
		background-color: white;padding: 20px;height: 100%;
	}
	
</style>
